<template>
  
  <el-container style="background-color: #fff;">
    <el-aside width="50%">
      <el-header class="f13">
        <el-icon>
          <Location />
        </el-icon>
        <span> {{ cityInfo.parent + cityInfo.city }}</span>
        <el-text class="mx-1">更新时间：{{ cityInfo.updateTime }}</el-text>
      </el-header>
      <el-divider />
      <el-main>
        <el-space direction="vertical">
          <el-text class="mx-1"
            >今日天气质量：{{ weatherInfo.quality }}</el-text
          >
          <el-text class="mx-1">今日温度：{{ weatherInfo.wendu }}℃</el-text>
          <el-text class="mx-1">今日湿度：{{ weatherInfo.shidu }}</el-text>
          <el-text class="mx-1">PM2.5：{{ weatherInfo.pm25 }}</el-text>
          <el-text class="mx-1">今日提示：{{ weatherInfo.ganmao }}</el-text>
        </el-space>
      </el-main>
      <el-link
        type="primary"
        @click="
          () => {
            this.drawer = true;
          }
        "
        >更多天气预测</el-link
      >
      <el-divider />
    </el-aside>
    <el-divider
      direction="vertical"
      border-style="dashed"
      style="height: 100%"
    />
    <el-main>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="Name" prop="name" required>
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="Password" prop="pwd">
          <el-input type="password" v-model="form.pwd"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">
            Login
          </el-button>
          <el-button @click="resetForm('form')">Reset</el-button
          >
        </el-form-item>
      </el-form>
    </el-main>

    <el-drawer v-model="drawer" title="更多天气" direction="btt" size="500">
      <el-table :data="weatherInfo.forecast" stripe style="width: 100%">
        <el-table-column prop="ymd" label="日期">
          <template #default="scope">
            {{ scope.row.ymd }}({{ scope.row.week }})
          </template>
        </el-table-column>

        <el-table-column prop="type" label="天气" />
        <el-table-column prop="fx" label="风向/风力">
          <template #default="scope">
            {{ scope.row.fx }} {{ scope.row.fl }}
          </template>
        </el-table-column>
        <el-table-column prop="high" label="温度">
          <template #default="scope">
            {{ scope.row.low }} ~ {{ scope.row.high }}
          </template>
        </el-table-column>
        <el-table-column prop="sunrise" label="日升/日落">
          <template #default="scope">
            {{ scope.row.sunrise }} / {{ scope.row.sunset }}
          </template>
        </el-table-column>
        <el-table-column prop="aqi" label="AQI" />
        <el-table-column prop="notice" label="注意" />
      </el-table>
    </el-drawer>
  </el-container>
</template>

<script>
import { getCity, getWeather } from "../common/cityCode";
export default {
  name: "Login",
  data() {
    return {
      isFormValid:false,
      form: {
        name: "",
        pwd: "",
      },
      rules: {
        name: [
          {
            pattern: /^[A-Za-z0-9]{1,20}$/,
            message:
              "Only numbers, uppercase letters, lowercase letters, length 1-20 are supported",
          },
        ],
        pwd: [
          {
            required: true,
            message: "Required password ",
          },
          {
            pattern: /^[A-Za-z0-9]{6,20}$/,
            message:
              "Only numbers, uppercase letters, lowercase letters, length 6-20 are supported",
          },
        ],
      },
      drawer: false,
      cityInfo: {},
      weatherInfo: {},
    };
  },

  mounted() {
    getCity();
    getWeather().then((res) => {
      console.log("res...>", res);
      this.cityInfo = res.cityInfo;
      this.cityInfo.updateTime = res.time;
      this.weatherInfo = res.data;
    });
  },
  computed: {},
  watch: {
    // 侦听器，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
  },

  methods: {
    submitForm() {
      // console.log(this.$refs);
      this.$refs["form"].validate((valid, obj) => {
        if (valid) {
          this.$router.push({
            path: "/home",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
@import "./login.scss";
</style>
